<template>
  <div class="home">
    <el-header class="el-row is-align-middle is-justify-space-between">
      <!-- Header content -->
      <h3 class=" color">办公室日常信息管理系统</h3>
      <div class="userinfo el-row is-align-middle">
        <div class="avatar">
          <router-link to="/login">
            <el-avatar :src="circleUrl"></el-avatar>
          </router-link>
        </div>
        <div class="username">
          <p> {{uname}},欢迎</p>
        </div>
      </div>
    </el-header>
    <el-container>
      <!--  -->
      <el-aside width="250px">
        <!-- aside content -->
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <template
                v-for="(item,index) in menuData"
                :key="index"
              >
                <el-menu-item
                  :index="(index+1).toString()"
                  @click="changeMenu(index)"
                >
                  <i :class="item.iconClass"></i>
                  <template v-slot:title>
                    <span>{{item.menuName}}</span>
                  </template>
                </el-menu-item>
              </template>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <!-- 主要内容 -->
      <el-main>
        <!-- 考勤管理 -->
        <div class="tbComponents">
          <transition name="el-zoom-in-top">
            <Attendance v-show="menuData[0].menuShow" />
          </transition>
        </div>
        <!-- 会议记录管理 -->
        <div class="tbComponents">
          <transition name="el-zoom-in-top">
            <Meeting v-if="menuData[1].menuShow"></Meeting>
          </transition>
        </div>
        <!-- 文件管理 -->
        <div class="tbComponents">
          <transition name="el-zoom-in-top">
            <FileManage v-show="menuData[2].menuShow"></FileManage>
          </transition>
        </div>
        <!-- 办公室事务管理 -->
        <div class="tbComponents">
          <transition name="el-zoom-in-top">
            <Affair v-if="menuData[3].menuShow"></Affair>
          </transition>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import FileManage from "components/FileManage.vue";
import Attendance from "components/Attendance.vue";
import Meeting from "components/Meeting.vue";
import Affair from 'components/Affair.vue';

export default {
  components: {
    FileManage,
    Attendance,
    Meeting,
    Affair,
  },
  data() {
    return {
      circleUrl:
        "https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png",
      currentRow: null,
      uname: "",
      menuData: [
        { menuName: "考勤管理", iconClass: "el-icon-s-check", menuShow: true },
        {
          menuName: "会议记录管理",
          iconClass: "el-icon-chat-line-round",
          menuShow: false,
        },
        {
          menuName: "文件管理",
          iconClass: "el-icon-document",
          menuShow: false,
        },
        {
          menuName: "办公室日常事务管理",
          iconClass: "el-icon-s-claim",
          menuShow: false,
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changeMenu(index) {
      for (let i = 0; i < this.menuData.length; i++) {
        this.menuData[i].menuShow = false;
      }
      this.menuData[index].menuShow = true;
    },
  },
  mounted() {
    // 判断用户是否登录
    fetch("/api/judgeLoginServlet", {
      method: "post",
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.status == "0") {
          this.uname = res.data.uname;
        } else {
          this.$message.error("您还未登录，请先登录！");
          this.$router.replace("/login");
        }
      });
  },
};
</script>

<style scoped>
.tbComponents {
  position: absolute;
  width: calc(100vw - 300px);
}
.home {
  background-color: #f7f7f7;
}
.el-header {
  background-color: #fff;
  color: #444;
}
.el-menu {
  height: calc(100vh - 60px);
}
</style>
